/* 中间电影item组件 */
<template>
    <div class="movies-items flex-center">
        <div class="left-img-con">
            <img :src="item.img" alt="" />
        </div>
        <div class="right-text-con flex-center">
            <div class="movie-info-con">
                <div class="movie-top-con">
                    <span class="movie-title text-overflow">{{ item ? item.nm : "1921" }}</span>
                    <span class="movie-max" v-show="item.version"></span>
                    <span class="movie-pre-show" v-show="item.preShow"></span>
                </div>
                <div class="people">
                    <span>{{ item.wish }}</span>
                    <span> 人想看</span>
                </div>
                <div class="actor text-overflow">{{ item.star }}</div>
                <div class="show-info text-overflow">{{ item.showInfo }}</div>
            </div>
            <div class="movie-btn-con">
                <button :class="getCustomTime(item.rt) - currentTime > 1 ? 'isPreShow' : ' '">
                    {{ getCustomTime(item.rt) - currentTime > 1 ? "预售" : "购票" }}
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, computed } from "vue";

import { getTime, getCustomTime } from "utils/index";
defineProps({
    item: Object,
});

// 计算
const currentTime = computed(() => {
    return getTime();
});
</script>

<style lang="less" scoped>
.flex-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

// 文字溢出
.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 是否预售
.isPreShow {
    background-color: #3c9fe6 !important;
}

.movies-items {
    width: 100%;
    height: 114px;
    font-size: 13px;
    background-color: #fff;
    padding-left: 15px;
    .left-img-con {
        width: 64px;
        height: 90px;
        img {
            width: 100%;
        }
    }
    .right-text-con {
        height: 100%;
        padding: 12px 14px 12px 0;
        border-bottom: 1px solid #e1e1e1;
        .movie-info-con {
            width: 207px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .movie-top-con {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .movie-title {
                    font-size: 17px;
                    color: #333;
                    font-weight: 700;
                }
                span {
                    display: inline-block;
                    margin-right: 3px;
                }
                .movie-max {
                    width: 43px;
                    height: 14px;
                    background-image: url("");
                    background-size: cover;
                }
                .movie-pre-show {
                    width: 23px;
                    height: 14px;
                    background-image: url("");
                    background-size: cover;
                }
            }
            .people {
                span:first-child {
                    color: #faaf00;
                    font-size: 15px;
                    font-weight: 600;
                }
            }
            .actor,
            .show-info {
                font-size: 13px;
            }
        }
        .movie-btn-con {
            width: 47px;
            button {
                width: 100%;
                line-height: 28px;
                background-color: #f03d37;
                border-radius: 4px;
                border: none;
                outline: none;
                color: #fff;
                font-size: 12px;
            }
        }
    }
}
</style>
